<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>米哈游-TECH OTAKUS SAVE THE WORLD</title>
  <link rel="shortcut icon" href="./images/mihayou-favicon.ico">

  <link rel="stylesheet" href="./css/phone.css">
</head>

<body>

  <header>
    <img src="./images/mihayou.png" alt="">
  </header>

  <input type="radio" name="game" id="game1" checked>
  <input type="radio" name="game" id="game2">
  <input type="radio" name="game" id="game3">
  <input type="radio" name="game" id="game4">
  <input type="radio" name="game" id="game5">
  <input type="radio" name="game" id="game6">

  <main>

    <!-- 游戏导航区 -->
    <div class="game-nav">

      <label for="game1">
        <img src="./images/m1.png" alt="">
      </label>

      <label for="game2">
        <img src="./images/m2.png" alt="">
      </label>

      <label for="game3">
        <img src="./images/m3.png" alt="">
      </label>

      <label for="game4">
        <img src="./images/m4.png" alt="">
      </label>

      <label for="game5">
        <img src="./images/m5.png" alt="">
      </label>

      <label for="game6">
        <img src="./images/m6.png" alt="">
      </label>


    </div>

  </main>

  <!-- 介绍区 -->
  <div class="intro-box">

    <!-- 介绍一 -->
    <div>
      <!-- 标题 -->
      <div class="l1">
        <p>崩坏学园2</p>
        <p>Houkai Impact 2</p>
      </div>

      <!-- 介绍信息 -->
      <div class="l3">
        <p>米哈游崩坏系列经典Q版射击游戏。</p>
        <p>末日都市之旅，指尖爽快战斗，开启与少女们的末世物语。</p>
      </div>

      <!-- 导航区 -->
      <div class="links">

        <div><img src="./images/home.svg" alt=""></div>
        <div><img src="./images/weibo.svg" alt=""></div>
        <div><img src="./images/weixin.svg" alt=""></div>
        <div><img src="./images/bilibili.svg" alt=""></div>

      </div>

    </div>

    <!-- 介绍二 -->
    <div>
      <!-- 标题 -->
      <div class="l1">
        <p>崩坏3</p>
        <p> Honkai Impact 3rd</p>
      </div>

      <!-- 介绍信息 -->
      <div class="l3">
        <p>米哈游崩坏系列3D全视角卡通渲染、次世代动作游戏。</p>
        <p>在被崩坏侵蚀的世界中，勇敢的少女组成的女武神部队，为守护世界而展开了战斗。</p>
      </div>

      <!-- 导航区 -->
      <div class="links">

        <div><img src="./images/home.svg" alt=""></div>
        <div><img src="./images/weibo.svg" alt=""></div>
        <div><img src="./images/weixin.svg" alt=""></div>
        <div><img src="./images/bilibili.svg" alt=""></div>

      </div>

    </div>

    <!-- 介绍三 -->
    <div>
      <!-- 标题 -->
      <div class="l1">
        <p>未定事件簿</p>
        <p> Tears of Themis</p>
      </div>

      <!-- 介绍信息 -->
      <div class="l3">
        <p>米哈游律政恋爱推理游戏</p>
        <p>你将扮演新人律师，在与他携手解决离奇委托的过程中，被卷入不为人知的阴谋</p>
        <p>这是一场恋爱×推理的冒险，你将做出怎样的抉择？</p>
      </div>

      <!-- 导航区 -->
      <div class="links">

        <div><img src="./images/home.svg" alt=""></div>
        <div><img src="./images/weibo.svg" alt=""></div>
        <div><img src="./images/weixin.svg" alt=""></div>
        <div><img src="./images/bilibili.svg" alt=""></div>

      </div>

    </div>

    <!-- 介绍四 -->
    <div>
      <!-- 标题 -->
      <div class="l1">
        <p>原神</p>
        <p>Genshin Impact</p>
      </div>

      <!-- 介绍信息 -->
      <div class="l3">
        <p>米哈游开放世界冒险游戏</p>
        <p>在提瓦特大陆上，与你的伙伴们一起探索未知的世界</p>
      </div>

      <!-- 导航区 -->
      <div class="links">

        <div><img src="./images/home.svg" alt=""></div>
        <div><img src="./images/weibo.svg" alt=""></div>
        <div><img src="./images/weixin.svg" alt=""></div>
        <div><img src="./images/bilibili.svg" alt=""></div>

      </div>

    </div>

    <!-- 介绍五 -->
    <div>
      <!-- 标题 -->
      <div class="l1">
        <p>崩坏：星穹铁道</p>
        <p>Honkai: Star Rail</p>
      </div>

      <!-- 介绍信息 -->
      <div class="l3">
        <p>米哈游全新银河冒险策略游戏</p>
        <p>你将由此探索新的文明，结识新的伙伴，</p>
        <p>在无数光怪陆离的「世界」与「世界」之间展开新的冒险</p>
        <p>所有你想知道的，都将在群星中找到答案</p>
      </div>

      <!-- 导航区 -->
      <div class="links">

        <div><img src="./images/home.svg" alt=""></div>
        <div><img src="./images/weibo.svg" alt=""></div>
        <div><img src="./images/weixin.svg" alt=""></div>
        <div><img src="./images/bilibili.svg" alt=""></div>

      </div>

    </div>

    <!-- 介绍六 -->
    <div>
      <!-- 标题 -->
      <div class="l1">
        <p>绝区零</p>
        <p> Zenless Zone Zero</p>
      </div>

      <!-- 介绍信息 -->
      <div class="l3">
        <p>米哈游自研的全新动作游戏</p>
        <p>在这个空洞灾祸频仍的世界里，崛起了一座另类的城市——「新艾利都」。</p>
        <p>而你将成为串联起空洞与都市的关键少数派，名为「绳匠」的特殊职业人士。</p>
        <p>这里正等待着见证你的故事。</p>
      </div>

      <!-- 导航区 -->
      <div class="links">

        <div><img src="./images/home.svg" alt=""></div>
        <div><img src="./images/weibo.svg" alt=""></div>
        <div><img src="./images/weixin.svg" alt=""></div>
        <div><img src="./images/bilibili.svg" alt=""></div>

      </div>

    </div>


  </div>

  <div class="number-box">
    <div>
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </div>

    <div>/</div>

    <div>06</div>
  </div>

</body>

</html>